<template>
	<view>
		<Header title="统计" :backshow="true"></Header>
		<view class="toubu">
			<view class="content_content_con tongji_header shadow">
				<view class="tongji_list" v-for="(item,index) in shuju" :key="index">
					<view class="tongji_list_bor">
						<view class="two_four qianhui_ziti">{{item.name}}</view>
						<view class="thirty heise_ziti font_bold">{{item.zhi}}</view>
					</view>
				</view>
			</view>
			
			<tongji :tubiao="tongjitu"  :bingzhuangtu="bing" :chartDat="chartDat" :ring="ring" :chufa="chufa" :arcbar="arcbar" :xiaoshu="xiaoshu"></tongji>

		</view>
		  <requestLoading></requestLoading>
	</view>

</template>

<script>
	import tongji from "@/components/tongji.vue";
	 export default {
	  components:{
	   tongji
	  },
		data() {
			return {
				shuju: [{
					name: '平台客资',
					zhi: '235'
				}, {
					name: '跟进客户',
					zhi: '78'
				}, {
					name: '成交客户',
					zhi: '50'
				}, {
					name: '活动锁单',
					zhi: '20'
				}, {
					name: '退回客资',
					zhi: '8'
				}, {
					name: '取消订单',
					zhi: '0'
				}],
				tongjitu:{
					categories:{},
					series:{},
					
				},
				bing:{},
				tishi: 1 ,//展示加载动画，
				chartDat:{},
				ring:'',
				chufa:'',
				xiaoshu:'',
				arcbar:{}
				
			}
		},
		onLoad() {
			this.tongji();
		},
		onReady() {

		},
		onPullDownRefresh() {
		   	this.tishi=2;
			// uni.showToast({
			// 	title: '刷新成功',
			// 	icon: "none"
			// });
			this.tongji();
			console.log("触发下拉刷新")
		}, 
		onPageScroll:function(e){
		  if(e.scrollTop<0){
		    wx.pageScrollTo({
		      scrollTop: 0
		    })
		  }
		},
		methods: {
			tongji() {
				var that = this;
				this.configure.ajax({
					url: 'tongji/num',
					tishi: that.tishi,
					data: {},
					method: 'POST',
					success: function(res) {
						console.log("成功")
						console.log(res.data,"res.data")
						that.shuju[0].zhi=res.data.map.pckznum;
						that.shuju[1].zhi=res.data.map.gjnum;
						that.shuju[2].zhi=res.data.map.cjnum;
						that.shuju[3].zhi=res.data.map.hdsdnum;
						that.shuju[4].zhi=res.data.map.thkznum;
						that.shuju[5].zhi=res.data.map.qxddnum;
						that.tongjitu.categories=res.data.categories
						that.tongjitu.series=res.data.series
						
						that.chufa=Math.round((res.data.map.cjnum / res.data.map.pckznum) * 100)
						console.log('11111111111111111111111111111')
						console.log(res.data.map.cjnum / 1)
						if(res.data.map.pckznum==0){
							
							that.xiaoshu='0';
							that.chufa=0;
						}else{
							that.chufa=Math.round((res.data.map.cjnum / res.data.map.pckznum) * 100)
							that.xiaoshu=((res.data.map.cjnum / res.data.map.pckznum).toFixed(1)).toString()
							that.arcbar= {
								'categories': [],
								'series': [
								  {
									'name': "订单成交/接单总量",
									'data': that.xiaoshu
								  }
								]
							  }
						}
						console.log(that.xiaoshu)
						
						
						// that.chartDat.series[0].data[0].value=res.data.map.gjnum;
						// that.chartDat.series[0].data[1].value=res.data.map.cjnum;
						// that.chartDat.series[0].data[2].value=res.data.map.hdsdnum;
						// that.chartDat.series[0].data[3].value=res.data.map.thkznum;
						// that.chartDat.series[0].data[4].value=res.data.map.pckznum;
						// that.chartDat.series[0].data[5].value=res.data.map.qxddnum;
						
						that.chartDat= {
							series: [{
								data: [{
									"name": "跟进中",
									"value": res.data.map.gjnum
								}, {
									"name": "已成交",
									"value": res.data.map.cjnum
								}, {
									"name": "活动锁单",
									"value": res.data.map.hdsdnum
								}, {
									"name": "退回客资",
									"value": res.data.map.thkznum
								}, {
									"name": "放弃客资",
									"value": res.data.map.fqkznum
								}, {
									"name": "取消订单",
									"value": res.data.map.qxddnum
								}]
							}]
						},
						
						
						that.ring=res.data.map.pckznum.toString()
						
						console.log('chartDat')
						console.log(that.chartDat)
						that.bing= res.data.map
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tongji_header {
		display: flex;
		flex-wrap: wrap;
		padding-top: 36rpx;
	}

	.tongji_list {
		width: 33.33%;
		text-align: center;
		margin-bottom: 36rpx;
	}

	.tongji_list_bor {
		border-right: 1px solid $qianhui_eee;
	}

	.tongji_list:nth-child(1),
	.tongji_list:nth-child(2),
	.tongji_list:nth-child(3) {
		border-bottom: 1px solid $qianhui_eee;
		padding-bottom: 30rpx
	}

	.tongji_list:nth-child(3n) .tongji_list_bor {
		border-right: 0px;
	}

	.tongji_list_bor .two_four {
		margin-bottom: 16rpx;
	}

	.tongji {
		font-size: 20rpx;
		color: $qianhui_ziti;
		margin-left: 30rpx;
		border-left: 8rpx $zhuce_color solid;
		padding-left: 16rpx;

		text {
			font-weight: bold;
			font-size: 30rpx;
			color: $heise_ziti;
		}
	}
</style>
